<template>
	<basicModal @register="modalRegister" ref="modalRef" class="basicModal" @on-ok="okModal" @on-close="oncloseModal">
		<BasicForm ref="formRef" @register="register" labelAlign="left" layout="false" :showActionButtonGroup="false"/>
	</basicModal>
</template>

<script lang="ts" setup>
	import { useModal } from '@/components/Modal';
	import { propTypes } from '@/utils/propTypes';
	import { useForm } from '@/components/Form';
	import { formSchema } from '@/views/system/user/user.data';
	const modalRef: any = ref(null);
	const formRef: any = ref(null);

	const props = defineProps({
		title: propTypes.string.def('新增用户'),
		formValue: propTypes.any.def({}),
	});
	const modalTitle = ref(props.title);

	const [modalRegister, { openModal, closeModal, setSubLoading }] = useModal({
		title: modalTitle,
		width: 600,
	});

	const $message = window['message'];
	const [register, { getFieldsValue, validate, setFieldsValue,setFieldsComponentProps }] = useForm({
		gridProps: { cols: 1, xGap: 120 },
		schemas: formSchema || [],
	});

	const emits = defineEmits(['submit']);

	const showModal = (attr?) => {
		const { title, formValue } = attr;
		if (title) {
			modalTitle.value = title;
		}
		openModal();
		nextTick(() => {
			if (formRef && formValue) {
				try {
          // 特殊处理
          setFieldsComponentProps({field:'account',props:{'disabled':true}})
					setFieldsValue(formValue);
				} catch (error) {
					console.log(error);
				}
			}
		});
	};

	async function okModal() {
		try {
			await validate();
			emits('submit', getFieldsValue());
			setSubLoading(true);
			closeModal();
		} catch (error) {
			setSubLoading(false);
		}
	}
  function oncloseModal(){
    setFieldsComponentProps({field:'account',props:{'disabled':false}})
  }
	defineExpose({
		showModal,
		okModal,
	});
</script>

<style scoped></style>
